<template>
  <div class="skill_group">
    <el-form-item :label="$t('config.channel.accessSkillGroupName')+':'">
      <el-form :model="skillForm" ref="skillForm">
        <el-row>
          <el-col :span="10">
            <el-button v-if="showBtn" @click="addSkill()" size="small">{{$t('callServiceSkillGroup.callServiceSkillGroup5')}}</el-button>
          </el-col>
          <el-col :span="14">
            <el-checkbox v-model="skillForm.isOpenWeight" @change="toPeerChange">{{$t('configLazyLoad.channel.isOpenWeight')}}</el-checkbox>
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content"><img src="../../../.././../assets/img/config/weight_diversion.png" width="320"></div>
              <span class="prompt">{{$t('sms.introduce')}}</span>
            </el-tooltip>
          </el-col>
        </el-row>
        <!-- 此处skillForm.isOpenWeight会频繁切换，所以不能用v-if，使用v-if会导致数据混乱 -->
        <div class="item_group" v-show="!skillForm.isOpenWeight">
          <div class="item_li" v-for="(ToPeerItem, index) in skillForm.ToPeer">
            <el-col :span="9">
              <el-form-item :prop="'ToPeer.' + index + '.id'">
                <el-select
                        size="mini"
                        style="width: 100%"
                        filterable
                        v-model.trim="ToPeerItem.id"
                        :placeholder="$t('webchat.placeSkillsGrouop')"
                        @change="choseSkill(ToPeerItem, index, peerOptions)"
                        @visible-change="showSkillDialog"
                        :disabled="ToPeerItem.status === 'disable'">
                  <el-option
                          v-for="item in peerOptions"
                          :key="item.id"
                          :label="item.DisplayName"
                          :value="item.Exten">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="tooper_name_class">
              <el-form-item :prop="'ToPeer.' + index + '.name'">
                <el-input v-model.trim="ToPeerItem.name" :disabled="ToPeerItem.status === 'disable'" :placeholder="$t('webchat.typeName')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="checked">
                <el-checkbox v-model="ToPeerItem.checked" @change="topeerEnable(ToPeerItem)">{{$t('configLazyLoad.channel.isEnable')}}</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <i class="el-icon-minus del" @click.stop="deletePeerItem(index)"></i>
            </el-col>
          </div>
        </div>
        <!-- 此处skillForm.isOpenWeight会频繁切换，所以不能用v-if，使用v-if会导致数据混乱 -->
        <div class="weight-group" v-show="skillForm.isOpenWeight">
          <div class="item_li" v-for="(weightItem, index) in skillForm.ToPeerWeight">
            <el-col :span="12">
              <el-form-item :prop="'ToPeerWeight.' + index + '.id'">
                <el-select
                        size="mini"
                        style="width: 100%"
                        filterable
                        v-model.trim="weightItem.id"
                        :placeholder="$t('webchat.placeSkillsGrouop')"
                        @change="choseSkill(weightItem, index, peerOptions)"
                        @visible-change="showSkillDialog">
                  <el-option
                          v-for="item in peerOptions"
                          :key="item.id"
                          :label="item.DisplayName"
                          :value="item.Exten">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="weight_class">
              <el-form-item :prop="'ToPeerWeight.' + index + '.weight'">
                <el-input v-model.trim="weightItem.weight" :disabled="weightItem.status === 'disable'">
                  <template slot="append">{{$t('configLazyLoad.channel.weight')}}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-minus del" @click.stop="deletePeerItem(index)"></i>
            </el-col>
          </div>
        </div>
      </el-form>
    </el-form-item>
  </div>
</template>
<script>
  import {deepClone} from '../../../../../utils/m7Utils'
  export default {
    name: 'chooseSkillCroupWebchat',
    data () {
      return {
        skllGroup: '',
        dialogVisible: false,
        skillForm: {
          isOpenWeight: deepClone(this.openWeightInfo) || false,
          ToPeer: deepClone(this.toPeerInfo) || [],
          ToPeerWeight: deepClone(this.peerWeightInfo) || []
        },
        peerLength: 0,
        peerOptions: [],
        dialogTitle: '',
        isAdd: true, // 是编辑还是新增
        editIndex: 0,
        showBtn: true
      }
    },
    props: {
      toPeerInfo: {
        type: Array,
        default: []
      },
      peerWeightInfo: {
        type: Array,
        default: []
      },
      openWeightInfo: {
        type: Boolean,
        default: false
      },
      todoRandom: {
        type: Number,
        default: 0
      }
    },
    components: {},
    computed: {},
    watch: {
      todoRandom (cur) {
        this.skillForm.ToPeer = deepClone(this.toPeerInfo) || []
        this.skillForm.ToPeerWeight = deepClone(this.peerWeightInfo) || []
        this.skillForm.isOpenWeight = deepClone(this.openWeightInfo) || false
        this.toPeerChange()
      }
    },
    methods: {
      toPeerChange () {
        if (!this.skillForm.isOpenWeight) {
          if (this.peerLength && this.peerLength > 0 && this.skillForm.ToPeer.length >= this.peerLength) {
            this.showBtn = false
          } else {
            this.showBtn = true
          }
        } else {
          if (this.peerLength && this.peerLength > 0 && this.skillForm.ToPeerWeight.length >= this.peerLength) {
            this.showBtn = false
          } else {
            this.showBtn = true
          }
        }
        this.$nextTick(() => {
          this.$emit('showPriorityReceptionFun', Math.random())
        })
      },
      addSkill () {
        if (this.skillForm.isOpenWeight) {
          this.skillForm.ToPeerWeight.push({id: '', weight: '1'})
          this.toPeerChange()
        } else {
          this.skillForm.ToPeer.push({id: '', name: '', checked: true, status: 'enable'})
          this.toPeerChange()
        }
      },
      showSkillDialog (show) {
        if (show) {
          this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
            let mailQueues = this.$getCache('mailQueues')
            if (!mailQueues || mailQueues.length === 0) {
              // 按照老版没有技能组时应该跳转到添加技能组页 暂不处理
              // $().alertmessage("showError", "您还没设置技能组，请先到【渠道技能组】添加技能组!");
              return
            }
            this.peerOptions = mailQueues || []
          })
        }
      },
      //      是否启用技能组
      topeerEnable (data) {
        if (data.checked) {
          this.$set(data, 'status', 'enable')
        } else {
          this.$set(data, 'status', 'disable')
        }
      },
//      isOpenWeightChange () {
//        this.toPeerChange()
//      },
      choseSkill (data, indexData, array) {
        var typeName = array.filter(function (item, index) {
          return item.Exten === data.id
        })
        if (!this.skillForm.isOpenWeight) {
          var flag = true
          this.skillForm.ToPeer.forEach((obj, index) => {
            if (obj.id === typeName[0].Exten && index !== indexData) {
              flag = false
            }
          })
          if (typeName[0].DisplayName && flag) {
            data.name = typeName[0].DisplayName
          } else {
            data.id = ''
            data.name = ''
            this.$message.error(this.$t('configLazyLoad.channel.groupTip'))
          }
        } else {
          var flagWeight = true
          this.skillForm.ToPeerWeight.forEach((obj, index) => {
            if (obj.id === typeName[0].Exten && index !== indexData) {
              flagWeight = false
            }
          })
          if (typeName[0].DisplayName && flagWeight) {
          } else {
            data.id = ''
            this.$message.error(this.$t('configLazyLoad.channel.groupTip'))
          }
        }
      },
      deletePeerItem (index) { // 删除技能组
        if (!this.skillForm.isOpenWeight) {
          this.skillForm.ToPeer.splice(index, 1)
        } else {
          this.skillForm.ToPeerWeight.splice(index, 1)
        }
        this.toPeerChange()
      },
      changeStatus (status, index) {
        this.skillForm.ToPeer[index].status = status === 'enable' ? 'disable' : 'enable'
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
        let mailQueues = this.$getCache('mailQueues')
        if (!mailQueues || mailQueues.length === 0) {
          // 按照老版没有技能组时应该跳转到添加技能组页 暂不处理
          // $().alertmessage("showError", "您还没设置技能组，请先到【渠道技能组】添加技能组!");
          return
        }
        this.peerOptions = mailQueues || []
        this.peerLength = mailQueues.length
      })
      this.toPeerChange()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .item_li
    overflow hidden
  .iconfont.icon-guanbi
    position static
    cursor pointer
  .tooper_name_class,.weight_class
    padding 0 10px
  .el-icon-minus
    color $c-pink
    cursor pointer
  .prompt
    color $c-main
    line-height normal
    font-size 12px
    margin-left 16px
</style>
